<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>叠加wmts雨量站图层</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="./css/ol.css" type="text/css" />
    <link rel="stylesheet" href="./css/ktol3.css" type="text/css" />
    <link rel="stylesheet" href="./css/mapPop.css" type="text/css" />
    <link href="./css/widgets.css" rel="stylesheet" />
    <link href="./css/pretty.css" rel="stylesheet" />
    <style>
        .cesium-viewer .cesium-widget-credits {
            display: none !important;
        }
    </style>
</head>
<script type="text/javascript" src="./js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="./js/ol-debug.js"></script>
<script type="text/javascript" src="./js/iclient-ol-es6.js"></script>
<script type="text/javascript" src="./js/olms.js"></script>

<body
        style="
            margin: 0;
            overflow: hidden;
            background: #fff;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
        "
>
<div id="map" style="width: 100%; height: 100%;"></div>
<div
        id="toolbar"
        class="param-container tool-bar"
        style="margin: 10px; position: absolute; z-index: 10000;"
>
    <div>
        <input
                type="checkbox"
                id="stationSW"
                checked="true"
        />西丽水库-水位站
    </div>
    <div>
        <input
                type="checkbox"
                id="stationYL"
                checked="true"
        />西丽水库-雨量站
    </div>
    <div><input type="checkbox" id="rv" />河流</div>
    <div><input type="checkbox" id="sk" />水库</div>
    <div><input type="checkbox" id="sk-tile" />水库-wmts切片</div>
    <div><input type="checkbox" id="rv-vt" />河流(矢量瓦片)</div>
    <div><input type="checkbox" id="sk-vt" />水库(矢量瓦片)</div>
</div>
<script type="text/javascript">
    // 4490坐标系需自定义
    proj4.defs('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs')
    var projection = new ol.proj.get('EPSG:4490')
    projection.setExtent([-180, -90, 180, 90])

    // 指定此Arcgis图层的分辨率
    var resolutions = [
        0.001373291015624828,
        0.000686645507812414,
        0.000343322753906207,
        0.0001716613769531035,
        0.00008583068847655175,
        0.000042915344238275876,
        0.000021457672119137938,
        0.000010728836059568969,
        0.0000053644180297844846,
        0.0000026822090148922423,
        0.0000013411045074461211,
    ]
    var matrixIds = []
    for (var z = 0; z < resolutions.length; ++z) {
        matrixIds[z] = z
    }
    var url =
        'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI201712_20ZW2K/ImageServer/tile/{z}/{y}/{x}'

    var view = new ol.View({
        projection: projection, //坐标系参数如果不设置，则默认为墨卡托
        resolutions: resolutions, //分辨率层级数组
        center: [114.139825956825, 22.6513875967627],
        zoom: 1,
    })

    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: url,
                    projection: projection,
                    tileGrid: new ol.tilegrid.WMTS({
                        origin: [-180, 90],
                        tileSize: 256,
                        resolutions: resolutions,
                        matrixIds: matrixIds,
                    }),
                }),
            }),
        ],
        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: {
                collapsible: false,
            },
        }),
        view: view,
    })

    // 水位站 雨量站服务信息 可以从url地址中查看
    var service = {
        SW: {
            url:
                'http://10.230.30.94:8090/iserver/services/map-XL_rr/wmts-china',
            layerName: 'XL_rr_R',
            matrixSet: 'Custom_XL_rr_R',
            format: 'image/png',
            style: 'default',
        },
        YL: {
            url:
                'http://10.230.30.94:8090/iserver/services/map-XL_pp/wmts-china',
            layerName: 'XL_pp_R',
            matrixSet: 'Custom_XL_pp_R',
            format: 'image/png',
            style: 'default',
        },
        RV: {
            url:
                'http://10.230.30.94:8080/iserver/services/map-sz_rv/wmts-china',
            layerName: 'sz_rv_R',
            matrixSet: 'Custom_sz_rv_R',
            format: 'image/png',
            style: 'default',
        },
        SK: {
            url:
                'http://10.230.30.94:8080/iserver/services/map-sz_rswb/wmts-china',
            layerName: 'sz_rswb_R',
            matrixSet: 'Custom_sz_rswb_R',
            format: 'image/png',
            style: 'default',
        },
        SK_TILE: {
            url:
                'http://10.230.30.94:8080/iserver/services/map-ugcv5-szrswb/wmts-china',
            layerName: 'sz_rswb',
            matrixSet: 'Custom_sz_rswb',
            format: 'image/png',
            style: 'default',
        },
        RV_VT: {
            url:
                'http://10.230.30.94:8080/iserver/services/map-mvt-szrv/restjsr/v1/vectortile/maps/sz_rv',
        },
        SK_VT: {
            url:
                'http://10.230.30.94:8080/iserver/services/map-mvt-szrswb/restjsr/v1/vectortile/maps/sz_rswb',
        },
    }

    // 默认加载水位站和雨量站
    addWMTSLayer('SW', service['SW'])
    addWMTSLayer('YL', service['YL'])

    // 加载矢量瓦片图层
    function addVTLayer(key, params) {
        let layers = map.getLayers().getArray()
        let findLayer = null
        for (let each of layers) {
            if (each.getProperties()['id'] === key) {
                findLayer = each
            }
        }
        if (findLayer) {
            map.removeLayer(findLayer)
        }

        var vectorLayer = null
        var format = new ol.format.MVT({
            featureClass: ol.Feature,
        })
        var styleURL = params.url + '/style.json'
        var style = new ol.supermap.MapboxStyles({
            style: styleURL,
            map: map,
        })
        style.on('styleloaded', function () {
            vectorLayer = new ol.layer.VectorTile({
                declutter: true,
                source: new ol.source.VectorTileSuperMapRest({
                    style: styleURL,
                    projection: projection,
                    format: format,
                }),
                style: style.getStyleFunction(),
            })
            vectorLayer.set('id', key)
            map.addLayer(vectorLayer)
            vectorLayer.setZIndex(5)
        })
    }

    // 加载WMTS图层
    function addWMTSLayer(key, params) {
        var resolutionL = [
            0.0013717509172233532,
            0.0006858754586116766,
            0.0003429377293058383,
            0.00017146886465291915,
            0.00008573443232645957,
            0.00004286721616322979,
            0.000021433608081614893,
            0.000010716804040807447,
            0.000005358402020403723,
            0.0000026792010102018617,
            0.0000013396005051009308,
        ]
        var matrixIdsL = []
        for (var z = 0; z < resolutionL.length; ++z) {
            matrixIdsL[z] = z
        }
        var layer = new ol.layer.Tile({
            source: new ol.source.WMTS({
                url: params.url,
                layer: params.layerName,
                matrixSet: params.matrixSet,
                format: params.format,
                tileGrid: new ol.tilegrid.WMTS({
                    origin: [-180, 90],
                    tileSize: 256,
                    resolutions: resolutionL,
                    matrixIds: matrixIdsL,
                }),
                style: params.style,
            }),
        })
        layer.set('id', key)
        map.addLayer(layer)
    }

    // 移除图层
    function removeTheLayer(key) {
        let layers = map.getLayers().getArray()
        let findLayer = null
        for (let each of layers) {
            if (each.getProperties()['id'] === key) {
                findLayer = each
            }
        }
        if (findLayer) {
            map.removeLayer(findLayer)
        }
    }

    $('#stationSW').on('input change', function () {
        if (!this.checked) {
            removeTheLayer('SW')
        } else {
            addWMTSLayer('SW', service['SW'])
        }
    })

    $('#stationYL').on('input change', function () {
        if (!this.checked) {
            removeTheLayer('YL')
        } else {
            addWMTSLayer('YL', service['YL'])
        }
    })
    $('#rv').on('input change', function () {
        if (!this.checked) {
            removeTheLayer('RV')
        } else {
            addWMTSLayer('RV', service['RV'])
        }
    })
    $('#sk').on('input change', function () {
        if (!this.checked) {
            removeTheLayer('SK')
        } else {
            addWMTSLayer('SK', service['SK'])
        }
    })
    $('#sk-tile').on('input change', function () {
        if (!this.checked) {
            removeTheLayer('SK_TILE')
        } else {
            addWMTSLayer('SK_TILE', service['SK_TILE'])
        }
    })
    $('#rv-vt').on('input change', function () {
        if (!this.checked) {
            removeTheLayer('RV_VT')
        } else {
            addVTLayer('RV_VT', service['RV_VT'])
        }
    })
    $('#sk-vt').on('input change', function () {
        if (!this.checked) {
            removeTheLayer('SK_VT')
        } else {
            addVTLayer('SK_VT', service['SK_VT'])
        }
    })
</script>
</body>
</html>
